<template>
  <div class="clearfix table_with_page">
    <el-table
      style="width: 100%"
      :data="tableData"
      v-loading="loading"
      highlight-current-row
      @sort-change="handleSortChange"
    >
      <el-table-column
        type="selection"
        v-if="tableColumns[0].type"
        align="center"
      ></el-table-column>
      <el-table-column
        v-for="item in filterColumns"
        :prop="item.prop"
        :label="item.label"
        :key="item.prop"
        :width="item.width"
        :min-width="item.minWidth"
        :sortable="item.sortable"
        show-overflow-tooltip
        :align="item.align || 'center'"
        :sort-orders="['descending', 'ascending']"
      >
        <template slot-scope="scope">
          <slot :name="item.key" :row="scope.row">
            <span :class="{ sort_item_right: item.sortable }">
              {{ scope.row[item.prop] }}
            </span>
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="clearfix"><slot name="table-footer"></slot></div>
    <div class="table_page" v-if="hasPage">
      <el-pagination
        ref="pagination"
        layout="prev, pager, next"
        :current-page.sync="featchData.pageIndex"
        :page-size="featchData.pageSize"
        :total="total"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
/*
 *@author: maoyuchao
 *@date: 2020-08-26 15:41:12
 *@description: 封装table加分页组件
 */
export default {
  data() {
    return {};
  },
  computed: {
    filterColumns: function() {
      return this.tableColumns.filter(item => !item.type);
    }
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    tableData: {
      // 表格数据
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 1
    },
    featchData: {
      // 搜索条件
      type: Object,
      default: () => {}
    },
    tableColumns: {
      // columns数据
      type: Array,
      default: () => []
    },
    sortChange: {
      type: Function,
      default: v => v
    },
    hasPage: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handlePageChange() {
      const { internalCurrentPage, internalPageSize } = this.$refs.pagination;
      this.$emit("pageChange", {
        pageIndex: internalCurrentPage,
        pageSize: internalPageSize
      });
    },

    handleSortChange({ column, prop, order }) {
      console.log({ column, prop, order });
      this.$emit("sortChange", column);
    }
  }
};
</script>

<style lang="scss">
.el-table__header {
  width: 100% !important;
}
.el-table__body {
  width: 100% !important;
}
.table_with_page {
  width: 100%;
  .el-table {
    thead {
      tr {
        th {
          padding: 0;
          background-color: #f2f3f7;
          font-family: PingFangSC-Semibold;
          font-size: 14px;
          color: #777777;
          .cell {
            padding: 0 20px;
            line-height: 42px;
          }
        }
      }
    }
    .el-table__body-wrapper {
      tr {
        td {
          padding: 0;
          border-bottom: 1px solid #f2f3f7;
          .cell {
            padding: 0 20px;
            line-height: 42px;
            .sort_item_right {
              padding-right: 24px;
            }
          }
        }
        &:hover {
          td {
            background: rgba(46, 63, 99, 0.12);
          }
        }
        &.current-row {
          td {
            background: rgba(46, 63, 99, 0.12);
          }
        }
      }
    }
  }
}
.table_page {
  float: right;
  .el-pagination {
    margin: 11px 24px 11px 0;
    .el-pager {
      .number {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #777777;
        &.active {
          color: var(--themeColor);
        }
      }
    }
    button {
      color: #404040;
    }
    button:disabled {
      color: #ccc;
    }
  }
}
</style>
